<template>
	<div class="home">
		<div class="head">
			<div class="left each" style="flex: 2;">
				<a class="each" :class="{activeEff: $route.fullPath =='/index'?true:false}" @click="toRouter('/')">首页</a>
				<a class="each" :class="{activeEff: $route.fullPath =='/production'?true:false}" @click="toRouter('/production')">生产运行</a>
				<a class="each">设备运行</a>
				<a class="each">安防维护</a>
				<a class="each">管道线路</a>
			</div>
			<div class="mid each" style="flex: 1.2;position:'fixed'"></div>
			<div class="right each" style="flex: 2;">
				<span style="font-weight: bold;">杭州市</span>
				<span style="font-size: 12rem;">多云 8℃</span>
				<img src="../assets/yun.png" />
				<span style="font-family: DIN1451;color: aquamarine;">{{time}}</span>
			</div>
		</div>
		<router-view style="width: 95%;margin: 0 auto;"></router-view>
		<!-- 因为使用的是scale适配，所以过渡动画不太适合 -->
		<!-- <transition name="fade-transform">			
		</transition> -->
	</div>
</template>
<script>
	export default {
		name: 'home',
		data() {
			return {
				time: ''
			}
		},
		created() {
			this.settime()
			window.setInterval(() => {
				this.settime()
			}, 1000)
		},
		methods: {
			settime() {
				let t = new Date()
				this.time = t.getFullYear() + "-" + this.zero(t.getMonth() + 1) + '-' + this.zero(t.getDate()) + ' ' +
					this.zero(t.getHours()) + ' : ' + this.zero(t.getMinutes()) + ' : ' + this.zero(t.getSeconds())
			},
			zero(e) {
				return e < 10 ? '0' + e : e
			},
			toRouter(e) {
				if (this.$route.fullPath != e) {
					this.$router.push(e)
				}
			}
		}
	}
</script>
<style lang='scss'>
	.home {
		.head {
			display: flex;
			width: 95%;
			margin: 15rem auto;


			.each {
				height: 32rem;
				margin: 0 10rem;
				/* box-shadow: 10rem 0 10rem 10rem rgba($color: #000000, $alpha:0.2); */
				border-radius: 3rem;
			}

			.mid {
				background: url(../assets/logo.png);
			}

			.left {
				display: flex;

				a {
					display: block;
					flex: 1;
					margin: 0 5rem;
					line-height: 32rem;
					font-size: 14rem;
					color: #15F8FF;
					background: url(../assets/tit.png);

					&:hover {
						background: url(../assets/titActive.png);
						color: white;
					}
				}

				.activeEff {
					background: url(../assets/titActive.png);
					color: white;
				}
			}

			.right {
				color: white;
				position: relative;
				display: flex;
				align-items: center;

				span {
					margin-right: 10rem;
				}

				img {
					width: 30rem;
					height: 20rem;
					margin: 0 10rem;
				}
			}
		}
	}
</style>
